<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function generateCaptcha() {
        const chars =
          "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        let code = "";
        for (let i = 0; i < 4; i++) {
          code += chars[Math.floor(Math.random() * chars.length)];
        }
        document.getElementById("captchaText").textContent = code;
      }
      generateCaptcha();
    </script>
    <b>
      <form>
        <p><span style="color: blue">欢迎注册会员</span></p>
        <div>
          手机号码：&nbsp;<input
            type="text"
            name="123"
            id="123"
            placeholder="11位手机号码"
          /><span style="color: red">必填</span>
        </div>
        <div>
          创建密码：&nbsp;<input
            type="password"
            name="123"
            id="123"
            placeholder="8位密码"
          /><span style="color: red">必填</span>
        </div>
        <div>
          注册邮箱：&nbsp;<input
            type="password"
            name="123"
            id="123"
            placeholder="例如：wustzz@sina.com"
          /><span style="color: red">必填</span>
        </div>
        <div>
           验证码：
          <input type="text" id="captchaInput" name="captcha" required="" />
          <span
            id="captchaText"
            style="
              background: #f0f0f0;
              padding: 2px 6px;
              font-family: monospace;
              font-weight: bold;
              margin-left: 6px;
            "
          ></span>
          <button type="button" onclick="generateCaptcha()">刷新</button>
        </div>

        <div>
            性别：
          <input type="radio" name="sex" value="male" checked /> 男
          <input type="radio" name="sex" value="female" /> 女
        </div>
        <div>  生日：<input type="text" name="bath" placeholder=" 年/月/日"></div>
        <div>  年龄：<input type="password" name="123" id="123" /></div>
        <div>
            籍贯：
          <select name="major">
            <option value="0">其他省</option>
            <option value="1" selected="selected">湖北省</option>
            <option value="2">其他省</option>
          </select>
          <select name="major">
            <option value="0">其他</option>
            <option value="1" selected="selected">武汉</option>
            <option value="2">其他</option>
          </select>
        </div>
        <div>
          个人学历：
          <select name="major" style="width: 100px">
            <option value="0">专科</option>
            <option value="1" selected="selected">本科</option>
            <option value="2">硕士</option>
            <option value="3">博士</option>
          </select>
        </div>

        <div>
            月薪:<input
            type="range"
            name="salary"
            min="0"
            max="10000"
            step="100"
            value="5000"
            oninput="this.nextElementSibling.value=this.value"
          />
          <output>5000</output>
        </div>

        <div>
          个人爱好：
          <label>
            <input type="checkbox" name="like" value="football" />唱歌
          </label>
          <label>
            <input type="checkbox" name="like" value="basketball" />跑步
          </label>
          <label>
            <input type="checkbox" name="like" value="basketball" />游泳
          </label>
        </div>
        <div>
          <form action="/upload" method="post" enctype="multipart/form-data">
            个人照片：<input type="file" name="photo" />
          </form>
        </div>
        <div style="display: flex; align-items: center">
          <!--用 flex 布局，让文字和输入框垂直居中对齐-->

          个人简介:
          <textarea name="jianjie" cols="30" rows="10"></textarea>
        </div>
        <div>
               <button type="submit">提交</button> 
          <button type="reset">重填</button>
        </div>
        <script>
          document
            .getElementById("photo")
            .addEventListener("change", function (e) {
              const file = e.target.files[0];
              if (!file || !file.type.startsWith("image/")) return; // 只处理图片

              const reader = new FileReader();
              reader.onload = function (ev) {
                document.getElementById("preview").src = ev.target.result;
              };
              reader.readAsDataURL(file);
            });
        </script>
</form>
      </form>
    </b>
  </body>
</html>
